<template>
	<view class="vies">
		<view class="tops dis dis2">测试总评</view>
		<view class="progress dis dis1 dis2">
			<view class="propleft">
				<progr :progresstext="progresstext"></progr>
				<view class="text contenr">身体年龄</view>
			</view>
			<view class="line"></view>
			<view class="propleft rg">
				<progr :progresstext="progresstext1"></progr>
				<view class="text contenr">综合得分</view>
			</view>
		</view>
		<view class="radar">
			<rabar></rabar>
			<view class="radarText dis dis3  dis2">
				<view class="left dis dis2">
					<view class="leftYusn"></view>
					<text class="text">各维度的健康得分</text>
				</view>
				<view class="left dis dis2 rigt">
					<view class=" rigt_1"></view>
					<text class="text">健康分越高越好</text>
				</view>
			</view>
		</view>
		<view class="bilibili contenr">
			<view class="bilibilis contenr">
				<text>{{topcontent}}<text class="textColor"></text></text>
			</view>
		</view>
		<view class="kongs"></view>
		<block v-if="!mark">
			<block v-for="(item,index) in list" :key="index">
				<view class="itmsData" :class="{itmsData_i:index+1==list.length}">
					<view class="headr dis dis2">
						<image :src="item.img" mode="aspectFit" class="icons"></image>
						<text class="texts1"> {{item.weidu}}情况</text>
					</view>
					<block v-if="item.isempty==0">
						<view class="tu dis dis2" v-if="item.weidu !='阴阳' && item.weidu !='寒热' && item.weidu !='上火'">
							<view class="bgJin"></view>
							<view class="bgJin bgJin_2" :style="{width:jinduWidth(item.guanzhudu)}"></view>
							<view class="lins"></view>
							<view class="texts">重点关注</view>
						</view>
						<view class="angry contenr" v-if="item.weidu =='上火'">
							<block v-for="(items,indexp) in angryList" :key="indexp">
								<view class="angryImgItem contenr">
									<image src=" /static/img/icon2.png" mode="aspectFit" class="angryImg"></image>
									<image src=" /static/img/icon1.png" mode="aspectFit" class="angryImg" v-if="indexp<=item.num-1 && item.score<100"></image>
								</view>
							</block>
						</view>
						<view class="cold dis dis5 dis1" v-if="item.weidu =='阴阳' || item.weidu =='寒热'">
							<view class="top dis  dis2">
								<view class="left_1 contenr">
									<text v-if="item.weidu =='寒热'">寒</text>
									<text v-if="item.weidu =='阴阳'">阴</text>
								</view>
								<view class="con dis dis2">
									<view class="hot" :class="{hots:item.weidu =='阴阳'}"></view>
									<view class="cold_1" :class="{cold_1s:item.weidu =='阴阳'}"></view>
									<view class="qius" :class="[item.weidu =='阴阳'?(item.key=='偏阳'?'qius_3':'qius_1'):(item.key=='偏热'?'qius_2':'')]" :style="{left:setWidth(item.key,item.score)}"></view>
								</view>
								<!-- 'qius_1':item.key=='偏热'?'qius_2':item.key=='偏阳'?'qius_3':'' -->
								<view class="left_1 rig contenr">
									<text v-if="item.weidu =='寒热'">热</text>
									<text v-if="item.weidu =='阴阳'">阳</text>
								</view>
							</view>
							<view class="btoText">
								<text class="bottexts" v-if="item.weidu =='寒热'">偏寒</text>
								<text class="bottexts" v-if="item.weidu =='阴阳'">偏阴</text>
								<text class="bottexts bottexts1">平衡</text>
								<text class="bottexts" v-if="item.weidu =='寒热'">偏热</text>
								<text class="bottexts" v-if="item.weidu =='阴阳'">偏阳</text>
							</view>

						</view>
						<view class="list_1" v-if="item.score==100">
							<text>{{item.goodcontent}}</text>
						</view>
						<view class="list_1" v-else>
							<text>{{item.text1}}<text class="textColor">{{item.zhibiao}}</text>。{{item.text3}}<text class="textColor" v-if="item.textpg">{{item.textpg}}。</text>{{item.guanzhulist}}</text>
						</view>
					</block>
					<block v-if="item.isempty ==1 && item.weidu =='上火'">
						<view class="fire dis dis1 dis5 dis2">
							<image src="../static/img/suo.png" mode="aspectFit" class="suo"></image>
							<text class="fire_text">上火情况待测评</text>
							<view class="frie_btn contenr" @click="goUrls" >
								<text>去测评</text>
								<image src="../static/image/ico_5_1.png" mode="aspectFit" class="ico_5_1"></image>
							</view>
						</view>
					</block>
					<view class="btns contenr" @click="goHealth(item.suggestion,item.actionlist,item.zhibiao,item.weidu)" v-if="item.isempty !=1 && item.suggestion && item.score <100">
						<image src=" /static/img/fangan.png" mode="aspectFit" class="fana"></image>
						<text>我的{{item.weidu}}调理方案</text>
					</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import progr from '@/components/progress.vue';
	import rabar from '@/components/radarTo.vue';
	export default {
		components: {
			progr,
			rabar
		},
		data() {
			return {
				progresstext: app.progresstext || '?',
				progresstext1: app.progresstext1 || '?',
				angryList: [{}, {}, {}, {}, {}],
				topcontent: '', //提示
				mark: false, //是否全为满分
				list:[],
			};
		},
		created() {
			this.getData();
			console.log('listRadar1',app.listRadar1)
				console.log('value1',app.value1)
		},
		methods: {
			setWidth(name, nums) {
				let inde = 100;
				let numsp = 0;
				if (name == '偏阴' || name == '偏寒') {
					numsp =  nums/2-4;
				} else if (name == '偏阳' || name == '偏热') {
					numsp = 50+inde-nums;
				} else {
					numsp = 50;
				}
				if(nums==100){
					numsp = 50;
				}
				return `${numsp}%`
			},
			// 设置进度条
			jinduWidth(num) {
				let isShopw = 0;
				if (!num) {
					isShopw = 0
				} else {
					isShopw = num
				}
				// isShopw = widts - num;
				return `${isShopw}%`
			},
			// 获取数据
			getData() {
				let that = this;
				let data = app.retuData;
				console.log(data)
				// return
				if (!data) {
					return
				}
				this.topcontent = data.topcontent;
				let listData = data.weidulist;
				let s = 0;
				for (let i = 0; i < listData.length; i++) {
					if (listData[i].score == 100) {
						s = s + 1;
					}
					if(listData[i].guanzhu){
						let tex = listData[i].guanzhu.split('的{')[0].replace(/{/g,'').replace(/}/g,'')
						listData[i].guanzhulist = listData[i].guanzhu.split('的{')[1];
						let texg =listData[i].guanzhu.split('的{')[1]; 
						let textpg = '';//症状
						if(texg){
							if(texg.search('}，') !=-1){
								listData[i].guanzhulist  = texg.split('}，')[1].replace(/{/g,'').replace(/}/g,'')
								textpg = texg.split('}，')[0].replace(/{/g,'')
							}else{
								listData[i].guanzhulist  = texg.split('},')[1].replace(/{/g,'').replace(/}/g,'');
								textpg = texg.split('},')[0].replace(/{/g,'')
							}
						}
						if(tex){
							listData[i].guanzhu =`${tex}的`;
						}
						listData[i].textpg =textpg;
					}
					let template = data.template;
					template = template.replace(/{weidu}/, listData[i].weidu);
					template = template.replace(/{score}/, listData[i].score);
					let text1 = template.split('{zhibiao}。')[0]; //需要
					let text2 = template.split('{zhibiao}。')[1];
					console.log('text2',text2)
					let text3 = text2.replace(/{description}/, listData[i].description)
					text3 = text3.replace(/{zhengzhuang}/, listData[i].zhengzhuang)
					text3 = text3.replace(/{zhibiao}/, listData[i].zhibiao)
					text3 = text3.replace(/{reason}/, listData[i].reason)
					text3 = text3.replace(/{guanzhu}/, listData[i].guanzhu)
					text3 = text3.replace(/。。/g, '。')
					listData[i].text1 = text1;
					listData[i].text3 = `${text3}`;
					// listData[i].text3.replace(/。。/g, '。')
					if(listData[i].weidu.indexOf('脏腑') !=-1){
						listData[i].img = '/static/img/zangf.png'
					}else if(listData[i].weidu.indexOf('上火') !=-1){
						listData[i].img = '/static/img/shanghuo.png'
					}else if(listData[i].weidu.indexOf('湿气') !=-1){
						listData[i].img = '/static/img/shiqi.png'
					}else if(listData[i].weidu.indexOf('气血') !=-1){
						listData[i].img = '/static/img/qixu.png'
					}else if(listData[i].weidu.indexOf('阴阳') !=-1){
						listData[i].img = '/static/img/yinyang.png'
					}else if(listData[i].weidu.indexOf('寒热') !=-1){
						listData[i].img = '/static/img/hanre.png'
					}else{
						listData[i].img = '/static/img/hanre.png'
					}
				}
				this.list = listData;
				if (s == listData.length) {
					this.mark = true;
				}
				console.log('data', data)

			},
			goUrls() {
				let id = 1;
				app.inflamed = 1;//这是体检报告引导上火的需求
				app.title = '上火测评'
				uni.redirectTo({
					url: '/second/yang/evaluation/evaluation?id=1&&isfree=1'
				})
			},
			goHealth(suggestion, actionlist, text, title) {
				app.ensue = suggestion;
				app.actionlist = actionlist
				uni.navigateTo({
					url: `/second/yang/health?text=${text}&title=${title}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";

	// page {
	// 	background: #fff;
	// }
	// .vies{
	// 	background: #fff;
	// }

	.tops {
		width: 686upx;
		height: 100rpx;
		font-size: 36upx;
		font-family: $typeface;
		font-weight: 500;
		color: #000000;
		margin: auto;
	}

	.progress {
		width: 100%;
		height: 250upx;


		.propleft {
			width: 50%;
			height: 100%;

			.text {
				width: 100%;
				margin-top: 32upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #999999;
			}
		}

		.rg {
			border-right: none;
		}
		.line{
			width: 1upx;
			height: 86upx;
			background: #EBEBEB;
			margin-bottom: 50rpx;
		}
	}

	.radar {
		width: 100%;
		height: 500upx;
		margin-top: 64upx;
		position: relative;

		.radarText {
			width: 624upx;
			margin: auto;

			.left {
				width: 232upx;
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				margin-left: 40upx;
				.leftYusn {
					width: 20upx;
					height: 20upx;
					background: #FFE330;
					opacity: 0.6;
					margin-right: 6upx;
					border-radius: 50%;
				}
			}

			.rigt {

				color: #666666;
				margin-left: 0;
				margin-right: 20upx;
				.rigt_1 {
					width: 20upx;
					height: 20upx;
					margin-right: 6upx;
					border-radius: 50%;
					background: #333333;
				}
			}

		}

		// .zaIcon{
		// 	position: absolute;
		// 	width: 44upx;
		// 	height: 44upx;
		// 	top: 180rpx;
		// 	left: 60rpx;
		// }
		// ._1{
		// 	top: 20rpx;
		// 	left: 195rpx;
		// }
	}

	.bilibili {
		width: 688upx;
		min-height: 180upx;
		background: #FFFFFF;
		box-shadow: 0px 6upx 28upx 0upx rgba(0, 0, 0, 0.07);
		border-radius: 16upx;
		border: 1px solid #F2F2F2;
		margin: auto;
		margin-top: 180upx;
		font-size: 28upx;
		font-family: $typeface1;
		font-weight: 400;
		color: #666666;
		padding:32upx 0;

		.bilibilis {
			width: 624upx;
			height: 100%;

			.textColor {
				color: #333333;
				font-weight: 500;
				font-family: $typeface;
			}
		}
	}

	.kongs {
		width: 100%;
		height: 16upx;
		background: #F8F8F8;
		margin-top: 66upx;
		margin-bottom: 14upx;
	}

	.itmsData {
		width: 686upx;
		min-height:200upx;
		background: #FFFFFF;
		// border-radius: 24upx;
		border-bottom: 1upx solid #EBEBEB;
		margin: auto;
		margin-bottom: 32upx;
		padding-bottom: 32upx;
		.headr {
			width: 686upx;
			height: 80upx;
			margin: auto;

			.icons {
				width: 44upx;
				height: 44upx;
				margin-right: 11upx;
			}

			.texts1 {
				font-size: 36upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
			}
		}

		.tu {
			width: 606upx;
			height: 99upx;
			background: #F5F5F5;
			border-radius: 16upx;
			margin: auto;
			position: relative;
			margin-top: 15upx;

			.bgJin {
				width: 558upx;
				height: 12upx;
				background: #FFFFFF;
				border-radius: 15upx;
				position: absolute;
				margin-left: 21upx;
			}

			.bgJin_2 {
				background-color: #FFD344;
			}

			.lins {
				width: 8upx;
				height: 26upx;
				background: #F56B47;
				border-radius: 5upx;
				position: absolute;
				left: 60%;
			}

			.texts {
				width: 104upx;
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				// margin: auto;
				margin-top: 62upx;
				margin-left: 53%;
			}
		}

		.angry {
			width: 606upx;
			height: 99upx;
			background: #FBFAFA;
			border-radius: 16upx;
			margin: auto;

			.angryImgItem {
				width: 20%;
				height: 100%;
				position: relative;

				.angryImg {
					width: 35upx;
					height: 42upx;
					position: absolute;
				}
			}
		}

		.cold {
			width: 644upx;
			// width:606upx;
			height: 99upx;
			background: #F5F5F5;
			border-radius: 16upx;
			margin: auto;
			position: relative;

			.top {
				width: 623upx;
				height: 50%;
				margin: auto;
				margin-top: 16upx;

				.left_1 {
					width: 44upx;
					height: 44upx;
					color: #fff;
					background-color: #3f9fff;
					border-radius: 50%;
					font-size: 24upx;
					font-family: $typeface;
					font-weight: 500;
				}

				.con {
					width: 513upx;
					height: 10upx;
					position: relative;

					.hot {
						width: 513upx;
						height: 100%;
						background: #FF7654;
						border: 4upx solid #FFFFFF;
						position: absolute;
					}

					.cold_1 {
						background: #3F9FFF;
						height: 100%;
						width: 50%;
						border: 4upx solid #FFFFFF;
						position: absolute;
					}

					.qius {
						position: absolute;
						width: 22upx;
						height: 22upx;
						background: #3F9FFF;
						box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.12);
						border: 4upx solid #FFFFFF;
						border-radius: 50%;
						// top: 0;
					}

					.hots {
						background: #FFFFFF;
					}

					.cold_1s {
						background-color: #404243;
					}

					.qius_1 {
						background-color: #404243;
					}
					.qius_2{
						background-color: #FF7654;
					}
					.qius_3{
						background-color:#D8D8D8;
					}


				}

				.rig {
					background-color: #ff7654;
					border-radius: 50%;
					margin-left: 10upx;
				}

			}

			.btoText {
				width: 349upx;
				position: absolute;
				left: 146upx;
				top: 55upx;
				height: 33upx;

				.bottexts {
					width: 48upx;
					height: 33upx;
					font-size: 24upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #666666;
					line-height: 33upx;
				}

				.bottexts1 {
					margin-left: 105upx;
					margin-right: 98upx;
				}
			}

		}

		.list_1 {
			width: 670upx;
			min-height: 50upx;
			margin: auto;
			margin-top: 44upx;
			padding-bottom: 32upx;

			font-size: 28upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #666666;

			.textColor {
				color: #6E9DFF;
				font-weight: 500;
				font-family: $typeface;
			}
		}

		.btns {
			width: 670upx;
			height: 80upx;
			background: #FFEEB8;
			border-radius: 45upx;
			margin: auto;
			margin-bottom: 25upx;
			font-size: 30upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;

			.fana {
				width: 26upx;
				height: 26upx;
				margin-right: 15upx;
			}

		}

		.fire {
			width: 100%;
			height: 494upx;
			background-image: url(http://r.punkyangsheng.com/xcx/img/bgsr.png);
			background-size: 100% 100%;

			.suo {
				width: 96upx;
				height: 103upx;
			}

			.fire_text {
				width: 224upx;
				height: 45upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #FFFFFF;
			}

			.frie_btn {
				width: 170upx;
				height: 72upx;
				background: #FFFFFF;
				box-shadow: 0px 4upx 12upx 0px rgba(0, 0, 0, 0.2);
				border-radius: 36upx;
				font-size: 30upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-top: 35upx;

				.ico_5_1 {
					width: 32upx;
					height: 32upx;
					margin-left: 4upx;
				}
			}
		}
	}
	.itmsData_i{
		border: none;
	}
</style>
